<template>
	<view class="Wallpaper">
		<swiperComponent :swiperImgList="swiperImgList"></swiperComponent>
		<wallPaper :wallpaperList="wallpaperList"></wallPaper>
	</view>
</template>

<script>
	import swiperComponent from '../../components/swiper_btn_component/swiper_btn_component.vue'
	import wallPaper from '../../components/my_wallpaper/my_wallpaper.vue'

	export default {
		data() {
			return {
				queryObj: {
					classify: '全部',
					limit: 5,
					page: 1
				},
				swiperImgList: [],
				
				allImgQuert: {
					classify: '全部',
					limit: 10,
					page: 1
				},
				wallpaperList: [],
				total: 0,
				isLoading: false
			}
		},
		components: {
			swiperComponent,
			wallPaper
		},

		onLoad() {
			this.getImgList()
			this.getImg()
		},

		onReachBottom() {
			if (this.allImgQuert.limit * this.allImgQuert.page >= this.total) {
				return uni.showToast({
					title: '数据已经空啦',
					icon: 'success'
				})
			}
			if (this.isLoading) return
			this.allImgQuert.page += 1
			this.getImg()
		},

		onUnload() {
			clearInterval(this.timeout)
		},

		methods: {

			async getImgList() {
				const {
					data: res
				} = await this.$myRequest({
					url: '/my/wallpapers/getwallpaper',
					data: this.queryObj
				})
				this.swiperImgList = res.data
			},

			async getImg(item) {
				this.isLoading = true
				uni.showLoading({
					title: '数据加载中'
				})
					
				const {
					data: res
				} = await this.$myRequest({
					url: '/my/wallpapers/getwallpaper',
					data: this.allImgQuert
				})
				uni.hideLoading()
				this.wallpaperList = [...this.wallpaperList, ...res.data]
				this.total = res.total
				this.isLoading = false
			},

		}
	}
</script>

<style lang="scss">
	.imgList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		view {
			margin-top: 20rpx;
			padding: 0 8rpx;

			image {
				border-radius: 20rpx;
				height: 388rpx;
				width: 232rpx;
			}
		}
	}
</style>
